import React from 'react';
import axios from 'axios'
import './homepanel.scss'

export default class HomePanel extends React.Component{
    constructor(props){
        super(props)
        this.state={
            HomeNew:[],
        }
    }
    product(){}
    componentDidMount(){
        axios.get('https://apipc-xiaotuxian-front.itheima.net/home/new').then((res)=>{
            if(res.data){
                this.setState({
                    HomeNew:res.data.result
                })
            }
        })
    }
    render(){
        const {HomeNew} = this.state
        return(
            <div className='homepanel'>
                <div id="app">
                    <div className="center">
                        <div className="head">
                            <h3>
                                新鲜好物
                                <small>新鲜出炉 品质靠谱</small>
                            </h3>
                            <span>查看全部<i></i></span>
                        </div>
                        <ul>
                            {
                                HomeNew&&HomeNew.map((A,index)=>{
                                    return(
                                    <li key={index} onClick={this.product.bind(this,A)}>
                                            <img src={A.picture} alt="" />
                                        <p>{A.name}</p>
                                        <p>￥{A.price}</p>
                                    </li>

                                    )
                                })
                            }
                            
                        </ul>
                    </div>
                </div>
            </div>  
        )
    }
}